<template>
	<van-form :model="form" style="margin-top: 150px;">
		<h3 style="text-align: center;">忘记密码</h3>
		<van-field v-model="form.phone" name="" label="手机号" placeholder="请输入手机号"
			:rules="[{ required: true, message: '请填写手机号' }]" />
		<van-field v-model="form.code" label="验证码" placeholder="请输入验证码" use-button-slot>
			<van-button slot="button" size="small" type="danger" @click="getCode()">
				获取验证码
			</van-button>
		</van-field>
		<van-field v-model="form.password" type="password" name="" label="密码" placeholder="设置新密码"
			/>
		<van-field v-model="form.password2" type="password" name="" label="确认密码" placeholder="请确认新密码"
			 />
		<div style="margin: 16px;">
			<van-button round block type="primary" @click="toLogin()">确认</van-button>
		</div>
	</van-form>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				form: {
					password2: ''
				},
				code: ''
			}
		},
		created() {

		},
		methods: {
			getCode() {
				if (this.form.phone == '' | this.form.phone == null) {
					this.$message.error("请输入手机号")
				} else if (this.form.phone.length != 11) {
					this.$message.error("请输入有效手机号码（11位格式）");
				} else {
					axios.post(`http://localhost:10086/user/sendCode/${this.form.phone}`).then(res => {
						console.log(res.data);
						this.code = res.data.code;
						this.$message.success("验证码已发送");
					})
				}
			
			},
			toLogin() {
				axios.post(`http://localhost:10086/user/checkPhone`, this.form).then(res => {
					if (this.code != this.form.code) {
						this.$message.error("验证码错误");
					} else if (this.form.password2 != this.form.password) {
						this.$message.error("两次输入密码不一致");
					} else {
						axios.post(`http://localhost:10086/user/forget`, this.form).then(res => {
							console.log(res);
							if (res.status == 200) {
								this.$message.success("修改密码成功");
								location.href = "#/login"
							} else {
								this.$message.error("修改密码失败");
							}
						})
					}
				})
			},
		},
	}
</script>

<style>
</style>